<template>
    <div style="max-width: 960px;margin: 0 auto;">
        <Header style="color: #409EFF;"></Header>
        <div>
            <el-container>
                <el-header>
                    <div style="font-size: large;display: flex;align-items: center;margin-left: 50px;margin-top: 10px">
                        <i class="el-icon-user"></i>用户信息
                    </div>
                </el-header>
                <el-main>

                    <el-form style="border-radius: 4px" :model="ruleForm" :rules="rules" ref="ruleForm"
                             class="demo-ruleForm">

                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">
                                    <span style="margin-left: 70px;">用户名：</span>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item style="" prop="username">
                                        <el-input type="text" placeholder="请输入用户名" v-model="ruleForm.username"
                                                  style="align-items: right;display: inline-block"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">
                                    <span style="margin-left: 80px;">密码：</span>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item style="" prop="password">
                                        <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" autocomplete="off"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">
                                    <span style="margin-left: 50px;">确认密码：</span>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item  prop="checkPass">
                                        <el-input type="password" placeholder="请确认密码" v-model="ruleForm.checkPass" autocomplete="off"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>


                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">
                                    <span style="margin-left: 40px;">联系人姓名：</span>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item style="" prop="contactName">
                                        <el-input type="text" placeholder="请输入联系人姓名" v-model="ruleForm.contactName"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">
                                    <span style="margin-left: 40px;">所在区域：</span>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item>
                                        <el-select v-model="ruleForm.orgAddr" placeholder="请选择所在区域" style="float: left">
                                            <el-option label="东北" value="东北"></el-option>
                                            <el-option label="东南" value="东南"></el-option>
                                            <el-option label="中南" value="中南"></el-option>
                                            <el-option label="西北" value="西北"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>


                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">
                                    <span style="margin-right: 0px;">联系人身份证号码：</span>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item prop="contIdCard">
                                        <el-input type="text" placeholder="请输入账号" v-model="ruleForm.contIdCard"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">
                                    <span style="margin-left: 90px;">固话：</span>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item style="" prop="mobile">
                                        <el-input type="text" placeholder="请输入固话" v-model="ruleForm.mobile"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">
                                    <span style="margin-left: 90px;">邮箱：</span>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item style="" prop="email">
                                        <el-input type="text" placeholder="请输入邮箱" v-model="ruleForm.email"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">
                                    <span style="margin-left: 90px;">传真：</span>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item style="" prop="fax">
                                        <el-input type="text" placeholder="请输入传真" v-model="ruleForm.fax"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>
                        <div style="line-height: 30px">
                            <el-row>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple" style="margin-left: 45px;">营业执照照片：
                                    </div>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item style="float:left;display: block" prop="orgFilePath">
                                        <input type="file" id="uploadImage" @change="orgPath">
                                    </el-form-item>
                                </el-col>
                                <el-col :span="1">
                                    <div class="grid-content bg-purple">
                                        <span style="color:red;">*</span>
                                    </div>
                                </el-col>
                                <el-col :span="10">
                                    <div class="grid-content bg-purple">
                                        <span class="el-upload__tip"> (图片格式支持jpg，png，bmp,大小不得超过800*800)</span>
                                    </div>
                                </el-col>
                            </el-row>

                        </div>
                        <el-row>
                            <el-col :span="5">
                            <span>
                                预览：
                            </span>
                            </el-col>
                            <el-col :span="19">
                        <span style="height: 150px">
                        <vue-preview :slides="slide" class="preview" alt=""></vue-preview>
                        </span>
                            </el-col>
                        </el-row>

                        <el-form-item>

                            <el-button style="margin-top: 20px;width: 100px;float: right" type="primary"
                                       v-on:click="onSubmit('ruleForm')">下一步
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
    import Header from "../../../components/Header";
    import {registerValid} from '../../../api/userMG'

    export default {
        components: {Header},
        name: "Register",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                labelPosition: 'left',
                options: [],
                slide:[],
                ruleForm: {
                    username: window.localStorage.orgId,
                    password: '',
                    checkPass: '',
                    contactName: '',
                    orgAddr: '',
                    contIdCard: '',
                    mobile: '',
                    email: '',
                    fax: '',
                    opCode: 'REGISTER',
                    orgId: window.localStorage.orgId,
                    orgFilePath:''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入机构名称', trigger: 'blur'},
                        {min: 3, max: 18, message: '统一信用代码格式不正确', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    checkPass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    contactName: [
                        {required: true, message: '请输入联系人姓名', trigger: 'blur'}
                    ],
                    orgAddr: [
                        {required: true, message: '请输入注册地址', trigger: 'blur'}
                    ],
                    contIdCard: [
                        {required: true, message: '请输入联系人身份证', trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入联系方式', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {}
                    ],
                    fax: [
                        {required: true, message: '请输入传真', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {

            onSubmit(ruleForm) {
                console.log("===准备进入校验===");
                this.$refs[ruleForm].validate((valid) => {
                    console.log("===开始校验===");
                    if (valid) {
                        const _this = this;
                        registerValid(_this.ruleForm).then(
                            res => {
                                console.log("res=>", res.data);
                                if (res.code === 200) {
                                    _this.$router.push({name:"Mobile",params:{data:res.data}})
                                }
                            }
                        )
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            orgPath: function (e) {
                console.log("调用开始==============>", e);
                let file = e.target.files[0];
                console.log("原始file==========>", file);
                const fd = new FormData();// 否则后端报错400
                fd.append('file', file);
                console.log("FormData后的file==============>", fd);
                const config = {headers: {'Content-Type': 'multipart/form-data'}};
                this.$axios.post('/api/v1/excel/uploadPic', fd, config
                ).then(res => {
                    console.log("res.data.data",res.data.data);
                    this.ruleForm.orgFilePath = res.data.data;
                    console.log("window.localStorage.bakOrgPath", window.localStorage.bakOrgPath);
                    this.show = true;
                    let temp = {
                        src: "http://localhost:8082/" + res.data.data,
                        msrc: "http://localhost:8082/" + res.data.data,
                        w: 1200,// 大图宽
                        h: 900
                    };
                    this.slide = [temp];
                });
            },

        }
    }
    export const validater = {

        /**
         * 校验 包括中文字、英文字母、数字和下划线
         * 登录账号校验
         */
        validateAccount(rule, value, callback) {
            let acount = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/
            if (value && (!(acount).test(value))) {
                callback(new Error('账号不符合规范'))
            } else {
                callback()
            }
        },
        /**
         * 手机号码校验,注意：手机号码会随着社会的发展，衍生多种方式，请根据实际情况来，谢谢。
         * 原来：[1][34578]\d{9}      现在调整：[1][345789]\d{9}
         */
        mobile(rule, value, callback) {
            if (value && (!(/^[1][345789]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
                callback(new Error('手机号码不符合规范'))
            } else {
                callback()
            }
        }
    }
</script>

<style scoped>

    .el-header {
        background-color: #FFFFFF;
        color: #333;
        text-align: left;
        line-height: 60px;
    }

    .el-main {
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        line-height: 40px;
    }

    .demo-ruleForm {
        width: 770px;
        margin: 0 auto;
    }

    .el-icon-user:before {
        font-size: 30px;
    }




</style>